<template>
    <div :class="style.box">
        <template v-if="isNoEmpty">
            <el-carousel
                :autoplay="true"
                height="180px"
            >
                <el-carousel-item v-for="(item, index) in formData.imgList" :key="index" height="180px">
                    <a :class="style.imgitem" :href="item.imgLink" target="_blank">
                        <el-image
                            class="hover-animation"
                            :class="style.imgitem_img"
                            :src="item.imgUrl"
                            :style="{
                                width: '100%',
                                height: '180px',
                            }"
                            fit="cover"
                            alt=""
                        >
                        </el-image></a>
                </el-carousel-item>
            </el-carousel>
        </template>

        <div v-else :class="style.emptyBox">
            <div>
                <p :class="style.iconBox" class="viewEmpty_IconBox">
                    <i class="el-icon-picture"></i>
                </p>
                <p :class="style.iconBox" class="viewEmpty_IconBox">
                    <i class="el-icon-more"></i>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CarouselImg',
    props: {
        formData: {
            type: Object,
            default: () => ({})
        }
    },
    data () {
        return {
            style: {}
        };
    },
    computed: {
        isNoEmpty () {
            const { formData } = this;
            return !!(formData.imgList && formData.imgList.length > 0 && formData.imgList[0].imgUrl);
        }
    }
};
</script>
